<template>
  <div>
    <div class="left">
      <userbox :lform="$store.state.user.userInfo.user"></userbox>
      <div class="select">
        <div class="button" @click="refreshlist($store.state.user.userInfo.user.uid)">查看我发布过的文章</div>
        <div class="button" @click="shoucanglist($store.state.user.userInfo.user.uid)">查看我收藏过的文章</div>
        <div class="button" @click="dianzanliset($store.state.user.userInfo.user.uid)">查看我点赞过的文章</div>
      </div>
    </div>
    <div class="right">
      <h2>&emsp;我发布过的文章</h2>
      <div id="yjDomBox" style="margin:20px auto;">
        <ul class="yjList">
          <li class="clearfix" v-for="(item,index) in list" :key="index">
            <div class="yjListLeft">
              <img
                :src="item.article.headerimgurl"
                data-original-background="none"
                style="background: none;"
              />
              <!-- <span class="jingpin">精品</span> -->
            </div>
            <div class="yjListRight">
              <p @click="handleArtcile(item,index)" class="yjTitle">{{item.article.title}}</p>
              <p @click="handleArtcile(item,index)" class="yjInfo">{{item.article.intro}}...</p>
              <div class="yjBottom clearfix">
                <a
                  class="leftUserBox"
                  href="/travels/member/person.html?uid=cca485003bdf3cb0227d6e364aada8a2"
                  target="_blank"
                >
                  <span class="leftUserPic">
                    <img :src="'http://localhost:8010/getImage?name='+item.user.avataurl" />
                  </span>
                  <span class="leftUserName">{{item.user.nickname}}</span>
                </a>
                <div class="leftNub">
                  <span class="spanbutton" v-if="type=='write'" @click="modifyArticle(item)">修改</span>
                  <span class="spanbutton" v-if="type=='write'" @click="deleteArticle(item)">删除</span>
                  <span class="spanbutton" v-if="type=='dianzan'" @click="quxiaodianzan(item)">取消点赞</span>
                  <span class="spanbutton" v-if="type=='shoucang'" @click="quxiaoshoucang(item)">取消收藏</span>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import userbox from "@/components/user/userbox";
export default {
  components: {
    userbox
  },
  data() {
    return {
      list: [],
      type: "write"
    };
  },
  methods: {
    refreshlist(uid) {
      this.$axios.get("/api2/article/userlist?uid=" + uid).then(res => {
        this.list = res.data.list;
      });
    },
    shoucanglist(uid) {
      this.$axios.get("/api2/article/shoucanglist?uid=" + uid).then(res => {
        this.list = res.data.list;
        this.type = "shoucang";
      });
    },
    dianzanliset(uid) {
      this.$axios.get("/api2/article/dianzanlist?uid=" + uid).then(res => {
        this.list = res.data.list;
        this.type = "dianzan";
      });
    },
    quxiaodianzan(item){
      window.console.log(item);
      this.$axios.get("/api2/article/quxdianzan?uid="+item.user.id+"&aid="+item.article.id).then(Res=>{
        this.dianzanliset(item.user.id)
      })
    },
    quxiaoshoucang(item){
      window.console.log(item);
      this.$axios.get("/api2/article/quxshoucang?uid="+item.user.id+"&aid="+item.article.id).then(Res=>{
        this.shoucanglist(item.user.id)
      })
    },
    handleArtcile(item, index) {
      window.console.log(item);
      this.$store.commit("commons/setArticleId", item.article.id);
      this.$router.push("/strategy/page");
    },
    modifyArticle(obj) {
      window.console.log(obj);
      this.$store.commit("commons/setModify", obj);
      this.$router.push("/strategy/modify");
    },
    deleteArticle(obj) {
      this.$axios.get("/api2/article/delete/" + obj.article.id).then(res => {
        this.$message.success("删除成功");
        this.refreshlist(obj.user.id);
      });
    }
  },
  created() {},
  mounted() {
    let uid = this.$store.state.user.userInfo.user.uid;
    if (uid != null) {
      this.refreshlist(uid);
    }
    window.onNuxtReady(() => {
      uid = this.$store.state.user.userInfo.user.uid;
      this.refreshlist(uid);
    });
  }
};
</script>
<style lang="less" scoped>
@import url(../../assets/css/home.css);
.left {
  margin-top: 0px;
  margin-left: 50px;
  float: left;
  position: fixed;
}
.right {
  float: left;
  width: 1200px;
  min-height: 500px;
  background: rgb(236, 255, 249);
  margin: 50px;
  margin-left: 450px;
  border-radius: 20px;
  padding: 10px;
  h2 {
    display: block;
    margin-top: 30px;
    border-left: 5px solid greenyellow;
  }
}
.yjList {
  li:hover {
    background: rgb(203, 249, 255);
    border-radius: 20px;
    transform: scale(1.01);
    .yjBottom {
      background: rgb(203, 249, 255);
    }
    .spanbutton {
      font-size: 15px;
      &:hover {
        color: rgb(123, 154, 238);
        cursor: pointer;
      }
    }
  }
}
.select {
  background: blanchedalmond;
  margin-top: 0px;
  margin-left: 20px;
  border-radius: 20px;
  padding: 10px;
  position: fixed;
  width: 252px;
  z-index: 99999;
  .button {
    text-align: center;
    border-radius: 10px;
    width: 200px;
    margin: 5px auto;
    background: #ecfff9;
    &:hover {
      cursor: pointer;
      background: #fffff9;
    }
  }
}
</style>